<template>
    <view class="image-grid">
        <image class="image-item" v-for="(item,index) in imagesData" :src="item" :key="index"
               mode="aspectFill" @tap="previewImage(index)"/>
    </view>
</template>
<script setup>
const props = defineProps({
    images: {
        type: [Array, String],
        default: () => {
            return []
        }
    }
})

const imagesData = computed(() => {
    console.log('props.images', props.images)
    if (!props.images) {
        return []
    }
    if (Array.isArray(props.images)) {
        return props.images
    } else {
        return props.images.split(',')
    }
})

const previewImage = (index) => {
    uni.previewImage({
        current: index,
        urls: imagesData.value
    })
}
</script>
<style scoped lang="scss">
.image-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10rpx;
    
    .image-item {
        width: 100%;
        height: 120rpx;
        object-fit: cover;
        border-radius: 10rpx;
    }
}
</style>
